<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="box m1280 f f-j-b">
			<div class="left">
				<div class="topAva f f-a-c f-j-b">
					<div class="leftAva f f-a-c">
						<div class="imgAva"><img :src="obj.clubImage" alt="" /></div>
						<div class="name">
							<div class="names">{{ obj.clubName }}</div>
							<div class="fans">{{ obj.fansNum }} Fans</div>
						</div>
					</div>
					<div class="rigXin f f-a-c">
						<div class="hui hand f f-a-c">
							<img @click.stop="ficle(obj)" v-if="obj.favorite == 0" src="/src/assets/page/1.png" alt="" />
							<img v-else @click.stop="cancelCollection(obj)" src="/src/assets/page/01.png" alt="" />
							{{ obj.favoriteNum }}
						</div>
						<div @click.stop="copyLoca" class="hui hand f f-a-c"><img src="/src/assets/page/7.png" alt="" />hare</div>
						<div @click="report" class="hui hand f f-a-c"><img src="/src/assets/page/5.png" alt="" />Report</div>
					</div>
				</div>
				<div class="onty f f-a-c">
					<div class="month">${{ obj.discount }}/Month</div>
					<div class="monthXiao">${{ obj.subscription }}/month</div>
					<div @click.stop="joinIn(obj)" :class="{ btnAct: obj.subscriptionId != null && obj.subscriptionId > 0 }" class="btns hand">
						{{ obj.subscriptionId != null && obj.subscriptionId > 0 ? "Joined" : "Join" }}
					</div>
				</div>
				<!-- count -->
				<div class="countssss">
					{{ obj.description }}
				</div>
				<div class="xian"></div>
				<div v-for="(item, index) in list" @click="goDetils(item)" :key="index" class="yarn hand f f-a-c f-j-b">
					<div class="leftCount">
						<div class="yarnNum">{{ dayjs(item.publishTime).format("MM/DD , YYYY") }}</div>
						<div class="title">{{ item.title }}</div>
						<div class="counts">
							{{ item.description }}
						</div>
						<div class="f f-a-c">
							<div v-for="(ite, ind) in item.tags" :key="ind" class="data">{{ ite }}</div>
							<!-- <div class="data">Data</div> -->
						</div>
					</div>
					<div class="imgBg"><img :src="item.image" alt="" /></div>
				</div>

				<!-- 分页器 -->
				<div style="margin-bottom: 80px" class="hand">
					<div class="example-pagination-block f f -a-c f-j-c">
						<el-pagination @size-change="sizeChange" :default-page-size="5" @current-change="currentChange" layout="prev, pager, next" :total="total" />
					</div>
				</div>
			</div>
			<div style="margin-bottom: 80px" class="right">
				<div class="rigTop f f-d-c f-j-c f-a-c">
					<div class="top"><img :src="objUser.sellerAvatar" class="touImg" alt="" /></div>
					<div class="name">{{ objUser.sellerFirstName }}{{ objUser.sellerLastName }}</div>
					<div class="emit">{{ joip }}</div>
					<div class="address f f-a-c"><img src="/src/assets/page/8.png" alt="" />{{ objUser.countryName }} {{ objUser.stateName }} {{ objUser.cityName }} | {{ getTimes(objUser.lastLogin) }}</div>
					<div class="topcs f f-j-c f-w-w f-a-c">
						<div class="topItem" style="margin-left: 8px" v-for="(item, index) in objUser.sellerTopicNames" :key="index">{{ item }}</div>
					</div>
					<div class="ask hand">Ask on Xpert</div>
					<div class="count">{{ objUser.buyerMyDescribe }}</div>
				</div>
				<div class="rigBot">
					<div class="related">Related club</div>
					<div v-for="(item, index) in relatList" :key="index" class="boxItem f f-a-c f-j-b">
						<div class="itemLef f f-a-c">
							<div><img :src="item.avatar" alt="" /></div>
							<div class="nei">
								<div class="name">{{ item.clubName }}</div>
								<div class="time">
									{{ item.articleNum }} articles <span>{{ item.fansNum }} Fans</span>
								</div>
							</div>
						</div>
						<div @click.stop="joinIn(item)" :class="{ btnAct: item.subscriptionId != null && item.subscriptionId > 0 }" class="itemRig hand">
							{{ item.subscriptionId != null && item.subscriptionId > 0 ? "Joined" : "Join" }}
						</div>
					</div>
					<!-- <div class="viewAll hand">View all</div> -->
				</div>
			</div>
		</div>
		<userModule @initObj="initObj" @initGigs="initGigs" ref="addRef" />
		<Join ref="join" />
		<upLoad @reportObj="reportObj" ref="upLoads" />
		<xpertTabbar />
		<OutClub @refresh="refresh" ref="outClub" />
	</div>
</template>

<script setup>
	import { ElMessage, dayjs } from "element-plus";
	import OutClub from "@/components/OutClub/index.vue";

	import { ref, onMounted } from "vue";
	import Join from "@/components/join/index.vue";
	import { getTimes, copy } from "@/utils/setting.js";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import { useRoute } from "vue-router";
	import { ClubsDetils, CancelCollectionClub, ClubFounderInformation, ReportClub, RelatedClubs, ClubArticle } from "@/api/knowClub/index.js";
	import upLoad from "../upLoad.vue";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import userModule from "../userModule.vue";
	let statusTab = ref(1);
	let addRef = ref("");
	let outClub = ref("");
	let ind = localStorage.getItem("ind");
	let obj = ref({});
	let objUser = ref({});
	let joip = ref("--");
	let upLoads = ref("");
	let userId = ref(0);
	let relatList = ref([]);
	let pageNum = ref(1);
	let total = ref(0);
	let list = ref([]);
	let join = ref("");
	let route = useRoute();
	let id = route.query.id;
	onMounted(async () => {
		await initObjs();
		await clubArtil();
		await initObjsUserInfo();
		await clbusList();
		window.addEventListener("scroll", handleScroll);
	});
	const initObjs = async () => {
		let n = await ClubsDetils({
			clubId: id
		});
		obj.value = n.data;
		userId.value = n.data.userId;
	};
	// 、、俱乐部文章
	const clubArtil = async () => {
		let n = await ClubArticle({
			pageNum: pageNum.value,
			pageSize: 5,
			clubId: id
		});
		total.value = n.data.total;
		list.value = n.data.list;
	};
	// 刷新
	const refresh = async () => {
		console.log("1111111111111111111111111");
		await clubArtil();
		await clbusList();
	};
	// /点击加入俱乐部
	const joinIn = item => {
		// console.log(item, "111111111111");
		// return;
		if (item.subscriptionId != null && item.subscriptionId > 0) {
			// 代表已经加入俱乐部
			outClub.value.id = item.subscriptionStripeId;
			outClub.value.upLoadVisible = true;
		} else {
			// 代表未加入俱乐部
			join.value.obj = item;
			join.value.money = item.subscription;
			join.value.upLoadVisible = true;
		}
	};
	const initObjsUserInfo = async () => {
		let n = await ClubFounderInformation({
			userId: userId.value
		});
		objUser.value = n.data;
		if (objUser.value.sellerWorkExperience[0]) {
			joip.value = objUser.value.sellerWorkExperience[0].position + "@" + objUser.value.sellerWorkExperience[0].company;
		}
	};
	// ============================================================================================
	const report = () => {
		upLoads.value.upLoadVisible = true;
	};
	// 举报文章请求
	const reportObj = async objs => {
		let n = await ReportClub({
			reportUserIdentity: ind == 3 || ind == 6 ? "1" : "2",
			foreignId: obj.value.id,
			reportContent: objs.content,
			reportImages: objs.imgList
		});
		if (n.code == 200) {
			ElMessage.success(n.msg);
		}
		upLoads.value.upLoadVisible = false;
	};
	// 点击收藏
	const ficle = async item => {
		console.log(item, "99999999999");
		addRef.value.type = 3;
		// 执行获取列表
		await addRef.value.initList();
		addRef.value.clubId = item.id;
		addRef.value.dialogTableVisible = true;
	};
	// 点击取消收藏俱乐部
	const cancelCollection = async item => {
		let n = await CancelCollectionClub({
			clubId: item.id
		});
		if (n.code == 200) {
			// 更新
			initObjs();
		}
	};
	const initGigs = () => {
		// 更新
		initObjs();
	};
	const initObj = () => {
		// 更新
		myPageView();
	};
	// 获取gigs
	const gigsListFn = async () => {
		let n = await ListBySeller({ userId: userId.value });
		port.gigsList = n.data;
		// port.sectList = n.data;
		port.gigsList.forEach(element => {
			element.stupShow = false;
		});
	};
	// 个人信息
	const myPageView = async () => {
		let n = await MyPageView({ userId: userId.value });
		obj.value = n.data;
		// 语言
		language.value = obj.value.language.join(",");
		// 工作职位
		if (obj.value.workExperience[0]) {
			joip.value = obj.value.workExperience[0].position + "@" + obj.value.workExperience[0].company;
		}
	};
	const copyLoca = () => {
		const text = window.location.href;
		copy(text);
	};
	// ============================================================================================
	// 获取相关俱乐部
	const clbusList = async () => {
		console.log("11111111111111111");
		let n = await RelatedClubs({ userId: objUser.value.id });
		relatList = n.data;
	};
	// 去join
	const goJoin = () => {
		router.push({
			path: "/ClubJoin"
		});
	};
	const goDetils = item => {
		router.push({
			path: "/ClubDetils",
			query: {
				id: item.id
			}
		});
	};
	const sizeChange = e => {};
	const addInfo = () => {
		addRef.value.dialogTableVisible = true;
	};
	const currentChange = e => {
		pageNum.value = e;
		clubArtil();
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 10) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
